<template>
  <div class="app-container">
  	<div class="filter-container">
  		<el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="handleEdit('create')">{{$t('table.add')}}</el-button>
  	</div>


  	<el-table
  	v-loading="listLoading"
  	:key="tableKey"
  	:data="list"
  	border
  	fit
  	highlight-current-row
  	style="width: 100%;"
    @sort-change="sortChange"
  	>
  	<el-table-column :label="$t('table.id')" prop="id" sortable="id" align="center" width="65">
  		<template slot-scope="scope">
  			<span>{{ scope.row.id }}</span>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('table.title')" align="center">
  		<template slot-scope="scope">
  			<span>{{ scope.row.title }}</span>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('table.image')" align="center">
  		<template slot-scope="scope">
        <img :src="scope.row.full_image" />
      </template>
  	</el-table-column>
  	<el-table-column :label="$t('integral.map_id')" align="center">
  		<template slot-scope="scope">
  			<span>{{ scope.row.map_id }}</span>
  		</template>
  	</el-table-column>
  	<el-table-column :label="$t('integral.win_coin')" prop="win_coin" sortable="win_coin" align="center">
  		<template slot-scope="scope">
  			<span>{{ scope.row.win_coin }}</span>
  		</template>
  	</el-table-column>
    <el-table-column :label="$t('integral.win_diamond')" prop="win_diamond" sortable="win_diamond" align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.win_diamond }}</span>
      </template>
    </el-table-column>
    <el-table-column :label="$t('integral.entry_fee')" prop="entry_fee" sortable="entry_fee" align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.entry_fee }}</span>
      </template>
    </el-table-column>
    <el-table-column :label="$t('integral.upgrade_need')" prop="entry_fee" sortable="upgrade_need" align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.upgrade_need }}</span>
      </template>
    </el-table-column>
    <el-table-column :label="$t('table.actions')" align="center" width="200">
      <template slot-scope="scope">
        <el-button type="primary" size="mini" @click="handleEdit('update', scope.row)">{{ $t('table.edit') }}</el-button>
        <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleDelete(scope.row)">{{ $t('table.delete') }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <Pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 85%; margin-left:50px;">
      <el-form-item :label="$t('table.title')" prop="title">
        <el-input v-model="temp.title"/>
      </el-form-item>
      <el-form-item :label="$t('table.image')" prop="image">
        <dropzone id="myVueDropzone" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS"/>
      </el-form-item>
      <el-form-item :label="$t('integral.map_id')" prop="map_id">
        <el-input v-model="temp.map_id"/>
      </el-form-item>
      <el-form-item :label="$t('integral.win_coin')" prop="win_coin">
        <el-input v-model="temp.win_coin"/>
      </el-form-item>
      <el-form-item :label="$t('integral.win_diamond')" prop="win_diamond">
        <el-input v-model="temp.win_diamond"/>
      </el-form-item>
      <el-form-item :label="$t('integral.entry_fee')" prop="entry_fee">
        <el-input v-model="temp.entry_fee"/>
      </el-form-item>
      <el-form-item :label="$t('integral.upgrade_need')" prop="upgrade_need">
        <el-input v-model="temp.upgrade_need"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
      <el-button type="primary" @click="editData">{{ $t('table.confirm') }}</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>

import { fetchList } from '@/api/integral'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import Dropzone from '@/components/Dropzone'

export default {
	components: { Pagination,Dropzone },
	directives: { waves },
	data() {
		return {
      resource:'integrals',

      //list data
			tableKey: 0,
			list: null,
			total: 0,
			listLoading: false,
			listQuery: {
				page: 1,
				limit: 20,
				sort: '-id'
			},

      //edit data
      temp: {},
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit Integral',
        create: 'Add Integral'
      },
		}
	},
	created() {
		this.getList()
	},
	methods: {
	    getList() {
	    	helper.getList(fetchList,this);
	    },
      getDefaultTemp() {
        return {
          id: undefined,
          title: '',
          image: '',
          map_id: '',
          win_coin: 0,
          win_diamond: 0,
          entry_fee: 0,
          upgrade_need: 0
        };
      },
      handleEdit(type,row){
        helper.handleEdit(type, row, this);
      },
      handleDelete(row){
        helper.handleDelete(this.resource, row ,this);
      },
      editData(){
        helper.updateResource(this.resource,this.temp,this)
      },
      dropzoneS(response) {
        this.temp.image=response.result.image
        this.$message({ message: 'Upload success', type: 'success' })
      },
      dropzoneR(file) {
        this.$message({ message: 'Delete success', type: 'success' })
      },
      sortChange(data) {
        helper.handleSortChange(data,this)
      }
  },
}
</script>
